<template>
  <div id="app">
    <!--   17783825177 8acy3l41g0shhlcurjweinryc5dl83jeuvgmy2xd8hib50r8
          15826112077 q0067g07wq9mo8ykgah7cngwkffdyi4elqnxkw9ztz0wq6jr
          fpyvwcdxsc8p888y2nbuljrwhkdpjrjmw680vx2wq8jxy7kf
    -->
    <PlutoTablePrint
      ref="refPlutoTable"
      :columns="systemTemplateTable.columns"
      :table-data="systemTemplateTable.tableData"
      :total="systemTemplateTable.total"
      @size-change="handleSizeChangeTemplate"
      @current-change="handleCurrentChangeTemplate"
      @filter="handleFilterTemplate"
      :show-selection="true"
      :show-actions="false"
      :show-pagination="true"
      :page-sizes="[5, 10, 20, 50]"
      :default-page-size="5"
      :show-index="true">
      <!-- 自定义操作列 -->
      <template v-slot:action="scope">
        <el-button @click="handleDetailAction(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
      </template>
    </PlutoTablePrint>
  </div>
</template>

<script>

import PlutoTablePrint from "@/components/PlutoTablePrint/PlutoTablePrint.vue";

import * as api from './api'

export default {
  name: 'DOC_TEMPLATE',
  components: {
    PlutoTablePrint
  },
  data(search = '') {
    return {
      systemTemplateTable: {
        columns: [
          {prop: 'uid', label: 'UID', width: '240'},
          {prop: 'groupName', label: '分组', width: '200'},
          {prop: 'templateName', label: '模板名称', width: '200'},
          {prop: 'templateCode', label: '板编码'},
          {prop: 'createTime', label: '创建时间', width: '140'},
          // 添加操作列配置
          {
            prop: 'action',
            label: '操作',
            width: '100',
            align: 'center',
            slot: 'action'  // 指定插槽名称
          }
        ],
        tableData: [],
        total: 0,
        filterParams: {
          pageNum: 1,
          pageSize: 5,
          search: ''
        },
      },

    };
  },
  computed: {},
  methods: {
    pageTemplateList() {

      api.pageTemplateList({...this.systemTemplateTable.filterParams}).then(res => {
        if (200 === res.code) {
          this.loading = true;
          this.systemTemplateTable.tableData = res.data.list;
          this.systemTemplateTable.total = res.data.total;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 分页大小变化
    handleSizeChangeTemplate(pageSize) {
      this.systemTemplateTable.filterParams.pageSize = pageSize;
      this.systemTemplateTable.filterParams.pageNum = 1;
      this.pageTemplateList();
    },
    // 当前页变化
    handleCurrentChangeTemplate(pageNum) {
      this.systemTemplateTable.filterParams.pageNum = pageNum;
      this.pageTemplateList();
    },
    // 筛选处理
    handleFilterTemplate(filterText) {
      this.systemTemplateTable.filterParams.search = filterText;
      this.systemTemplateTable.filterParams.pageNum = 1;
      this.pageTemplateList();
    },
    handleDetailAction(row) {
      this.$router.replace({
        path: '/process/doctemplateconfig',
        query: {templateCode: row.templateCode}
      });
    },
  },
  mounted() {

      this.pageTemplateList();
  }
 };
</script>

<style lang="scss" scoped>


</style>
